<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>计算里程</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		window._AMapSecurityConfig = {
			securityJsCode: "dba528dcd7d571a231a330b532a6cf61",
		};
	</script>
	<script type="text/javascript"
			src="https://webapi.amap.com/maps?v=2.0&key=4fbb5ae31246fb4337678f7649c87b1b&plugin=AMap.Driving"></script>
	<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<style type="text/css">
		#container{
			width: 885px;
			height: 500px;
			overflow: hidden;
		}
		.layui-form-item {
			margin-bottom: 0;
		}
		.layui-form-item {
			clear: both;
		}
		.layui-inline {
			margin-bottom: 5px;
			margin-right: 10px;
		}
		.layui-inline {
			vertical-align: middle;
		}
		.layui-inline {
			position: relative;
		}
		.layui-inline {
			display: inline-block;
		}
		.layui-input {
			display: block;
			width: 100%;
			padding-left: 10px;
		}
		.layui-input {
			height: 32px;
			line-height: 1.3;
			border-width: 1px;
			border-style: solid;
			background-color: #fff;
			border-radius: 2px;
		}
		.layui-btn {
			margin-left: 10px;
			transition: none;
		}
		.layui-btn {
			display: inline-block;
			height: 32px;
			line-height: 32px;
			background-color: #009688;
			color: #fff;
			white-space: nowrap;
			text-align: center;
			font-size: 12px;
			border: none;
			border-radius: 2px;
			cursor: pointer;
		}
		.layui-field-title {
			border-width: 1px 0 0;
		}

		.layui-elem-field {
			padding: 0;
			border-style: solid;
		}
		fieldset {
			display: block;
			margin-inline-start: 2px;
			margin-inline-end: 2px;
			padding-block-start: 0.35em;
			padding-inline-start: 0.75em;
			padding-inline-end: 0.75em;
			padding-block-end: 0.625em;
			min-inline-size: min-content;
		}
		.layui-elem-field legend {
			margin-left: 20px;
			padding: 0 10px;
			font-size: 12px;
			font-weight: 600;
		}
		legend {
			display: block;
			padding-inline-start: 2px;
			padding-inline-end: 2px;
			border-width: initial;
			border-style: none;
			border-color: initial;
			border-image: initial;
		}
	</style>
</head>
<body>
<div class="layui-form-item">
	<div class="layui-inline">
		<input id="mileageTraveled" class="layui-input" type="text" placeholder="输入公里数"/>
	</div>
	<div class="layui-inline">
		<button id="confirm" type="button" class="layui-btn" onclick="confirm()">确定</button>
	</div>
	<div class="layui-inline">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
			<legend>公里数：<span id="mileageTraveleds">0</span></legend>
		</fieldset>
	</div>
	<div class="layui-inline">
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
			<legend>时间：<span id="timetongxing">0</span>分钟</legend>
		</fieldset>
	</div>
</div>
<div id='container'></div>
</body>
<script type="text/javascript">
	function GetUrlByParamName(name){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		var URL =  decodeURI(window.location.search);
		var r = URL.substr(1).match(reg);
		if(r!=null){
			//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
			return  decodeURI(r[2]);
		};
		return null;
	};

	$.ajax({
		url:'${ctxPath}/transportReceipt/findlist_transportSet',
		type:'post',
		dataType:'json',
		data:{"dispatchNumber":GetUrlByParamName("dispatchNumber")},
		success:function(data){
			var list= data.data
			/* if(list.length > 0){
                $.ajax({
                    url:'https://api.map.baidu.com/directionlite/v1/driving?ak=feOy08GjBOLC83Ty77FIO4TdGQPhU3uO&origin=41.752449928713254,123.2017576139354&destination=41.52891603188376,121.2498380153761&waypoints=41.534082455183345,121.24953914913293&plate_number=辽A82DX2',
                    type:'get',
                    dataType:'json',
                    data:{},
                    success:function(data){
                         console.log(data)
                    },
                    error: function(data){
                        alert("调用路线规划接口出错!"+data);
                    }
                });
            } */
			if(list.length > 0){
				var setLongitude = ""
				var setLatitude = ""

				var getLongitude = ""
				var getLatitude = ""
				var waypoints = []
				for (var i = 0; i < list.length; i++) {
					if(list[i].setLongitude == '' || list[i].setLongitude == null){
						alert(list[i].setUnit+"经纬度为空！计算失败");
						return
					}
					if(list[i].getLongitude == '' || list[i].getLongitude == null){
						alert(list[i].getUnit+"经纬度为空！计算失败");
						return
					}
					setLongitude = list[i].setLongitude
					setLatitude = list[i].setLatitude
					if(list.length == (i+1)){
						getLongitude = list[i].getLongitude
						getLatitude = list[i].getLatitude
					} else {
						waypoints.push([list[i].getLongitude, list[i].getLatitude]);
					}
				}

				var map = new AMap.Map("container", {
					viewMode: '2D',
					zoom: 11,
					resizeEnable: true
				});

				var drivingOption = {
					policy: AMap.DrivingPolicy.LEAST_TIME,
					ferry: 1,
					map: map,
				}

				// 构造路线导航类
				var driving = new AMap.Driving(drivingOption)

				// 根据起终点经纬度规划驾车导航路线
				driving.search(new AMap.LngLat(setLongitude, setLatitude),
						new AMap.LngLat(getLongitude, getLatitude), {
							waypoints: waypoints
						}, function (status, result) {
							if (status === 'complete') {
								// 获取路程和时间
								var distance = result.routes[0].distance;
								var distanceUnit = result.routes[0].distance_unit;
								console.log("distance:" + distance + " distanceUnit:" + distanceUnit + " duration:" + duration)
								var duration = Math.floor(result.routes[0].time / 60); // 时间转换为分钟

								distance /= 1000; // 距离转换为公里

								// 更新页面上的显示
								document.getElementById("mileageTraveled").value = distance.toFixed(2);
								document.getElementById("mileageTraveleds").textContent = distance.toFixed(2) + " 公里";
								document.getElementById("timetongxing").textContent = duration + " 分钟";
							} else {
								console.error('获取驾车数据失败：' + result);
							}
						});

				/*var searchComplete = function (results){
                    if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                        return ;
                    }
                    var plan = results.getPlan(0);
                    var mileageTraveled = plan.getDistance(true).replace("公里","")
                    if (/\u7C73/.test(mileageTraveled)) {
                        // \u7C73 是“米”的Unicode编码   //正则表达式  .test 如果正则表达式中有米 返回true
                        var match = mileageTraveled.match(/\d+/);
                        if (match && match.length > 0) {
                            var meterValue = parseInt(match[0]); // 提取到的数字，并转换为整数
                            var mileageTraveled = meterValue / 1000;
                            $("#mileageTraveled").val(mileageTraveled.toFixed(2));
                        }
                    }else {
                        $("#mileageTraveled").val(plan.getDistance(true).replace("公里", ""))//获取距离
                        $("#mileageTraveleds").text(plan.getDistance(true))//获取距离
                        $("#timetongxing").text(plan.getDuration(true))//获取时间
                    }
                }


                var transit = new BMapGL.DrivingRouteLine(map, {renderOptions: {map: map},
                    onSearchComplete: searchComplete
                });
                var start = new BMapGL.Point(setLongitude,setLatitude);
                var end = new BMapGL.Point(getLongitude,getLatitude);
                transit.search(start, end, {
                    waypoints: waypoints
                });*/


			}
		},
		error: function(data){
			alert("查询收货客户经纬度异常!");
		}
	});

	function confirm(){
		parent.submit = 1
		parent.TDispatchInfoDlg.data.mileageTraveled = $("#mileageTraveled").val();//公里数
		var Index = parent.layer.getFrameIndex(window.name);
		parent.layer.close(Index);
	}
</script>
</html>
